<template>
  <c-select
    v-bind="$attrs"
    @change="handleItemChange"
    :value="value"
    :options="options"
    :props="props"
  ></c-select>
</template>

<script>
import { getEnum } from '@/cadmin/components/select/enum'
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'businessLevel',
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  data() {
    return {
      selected: null,
      options: [],
      loading: false,
      tableName: 'system_enum',
      props: {
        label: 'enum_value',
        value: 'enum_key',
      },
    }
  },
  computed: {},
  watch: {
    value(val) {
      this.selected = val
    },
    type() {
      this.getData()
    },
  },
  created() {
    this.selected = this.value
    this.getData()
  },
  mounted() {},
  methods: {
    async getData() {
      if (!this.type) {
        return
      }
      this.loading = true
      getEnum(this.type)
        .then(res => {
          this.options = res.data
        })
        .finally(() => {
          this.loading = false
        })
    },

    handleItemChange(val) {
      const select = this.options.find(item => item[this.props.value] === val) || {}
      this.$emit('change', val, select[this.props.label])
    },

    getJobName() {
      const select = this.options.find(item => item[this.props.value] === this.selected) || {}
      return this.selected ? select[this.props.label] : ''
    },
  },
}
</script>

<style scoped></style>
